<template>
	<view class="recharge">
		<toSafe></toSafe>
		<!-- 导航栏 -->
		<uni-nav-bar @clickLeft="HandleLeft" :fixed="true" leftIcon="left" :border="false" backgroundColor="transparent" :title="Title"></uni-nav-bar>
		<view class="recharge_content">
			<view class="amountBox">
				<view class="currentAmount">
					当前金额
				</view>
				<view class="amount">
					{{balance}}<text>豆</text>
				</view>
			</view>
			<image src="../../punlic/image/recharge.png" mode="" class="img"></image>
			<view class="rechargeAmount">
				<text class="rechargeAmount_title">选择充值金额</text>
				<ul class="lists">
					<li :class="['list', {'selectedType' : index == selectTypeIndex}]" 
						v-for="(item,index) of recharges" :key="index" 
						@click="selectRechargsType(item, index)">
						<text class="dummyAmount">{{item.number}}</text>
						<text class="amount">${{item.price}}</text>
					</li>
				</ul>
				<view class="set-price">
					<text class="util">$</text>
					<input 
						type="number"
						confirm-type="done"
						placeholder="点击输入充值金额1:100" 
						v-model="setPrice"
						maxlength="5"
						@confirm="onTap"
					/>
					
					<view class="dprice">
						<text >{{setPrice == '' ? '' : setPrice*100}}</text>
						<text>豆</text>
					</view>
					
				</view>
			</view>
			<!-- <view class="payment">
				<view class="payment_title">
					选择支付方式
				</view>
				<view class="payment_way">
					<view class="wx" v-for="(item,index) of items">
						<view class="wx_box">
							<uni-icons type="minus-filled" size="30" color="rgba(76, 191, 0, 1)"></uni-icons>
							<label for="che">
								<text>{{item.way}}</text>
							</label>
						</view>
						<radio-group @change="radioChange" class="checkbox">
							<view>
								<radio :value="item.value" :checked="index === current" />
							</view>
						</radio-group>
					</view>
				</view>

			</view> -->
			<view class="explain">
				<view class="title">
					充值说明
				</view>
				<text>
					城中村改造是重要的民生工程，有助于解决居住、教育、医疗等民生问题。此前，部分地区已经在逐步推进城中村改造，如今中央层面出台新政，在业内人士看来，这对于地方的城中村改造工作将形成有力的引领与推动。更重要的是，通过公共服务均等化、全覆盖，不仅能解决发展不平衡、不充分的问题，还能真正释放消费潜力和内需。
				</text>
			</view>
			<view class="btn" @click="admin">
				立即充值
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { rechargeList } from '@/api/User.js'
	import { redirectToCheckout, loadAirwallex } from 'airwallex-payment-elements'
	import { airwallexPayToken, payInfo } from '@/api/payment';
	import toSafe from '@/compoents/top-safe.vue'
	console.log(loadAirwallex)
	// 导航栏标题
	const Title = ref("充值");
	const balanceNum = uni.getStorageSync("balance");
	let balance = ref<number>(balanceNum)
	const HandleLeft = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	let items : Array<object> = [
		{
			value: 1,
			way: '微信支付',
			checked:true,
		},
		{
			value: 2,
			way: '微信支付'
		}
	]
	
	// 获取充值方式
	interface RechargeType {
		number: number,
		price: number,
		id: number,
		[propNames: string]: any
	}
	let recharges = reactive<RechargeType[]>([])
	let getRechargeList = async() => {
		let res:any = await rechargeList({
			pageNum: 1,
			pageSize: 6
		});
		recharges.push(...res.rows);
	}
	getRechargeList();
	
	// 选择充值金额
	let selectTypeIndex = ref<number>(-1);
	let selectRechargsType = (item: RechargeType, index) => {
		let {id} = item;
		selectTypeIndex.value = index;
	}
	
	let setPrice = ref<string>("");
	const onTap = () => {
		console.log(setPrice.value);
	};
	let mode = 'payment';
	// 充值
	let admin = () => {
		console.log(setPrice.value)
		if(!recharges[selectTypeIndex.value] && setPrice.value == '') {
			uni.showToast({
				title:"请选择充值金额",
				icon: 'none',
				duration:2000
			})
			return;
		}
		airwallexPayToken().then((res:any) => {
			let price = 0,novelBeans = 0;
			if(recharges[selectTypeIndex.value] && recharges[selectTypeIndex.value].price) {
				price = recharges[selectTypeIndex.value].price,
				novelBeans = recharges[selectTypeIndex.value].number
			} else if(setPrice.value != ''){
				price = Number(setPrice.value);
				novelBeans = price * 100;
			}
			let params = {
				amount: price,
				token: res.data.token,
				currency: 'USD',
				orderType: 1,
				novelBeans
			}
			payInfo(params).then((res:any) => {
				uni.navigateTo({
				  url: '/pages/webview/index?secretId='+res.data.client_secret + '&intentId='+res.data.id
				});
			})
		})
	}
	const redirectHpp = (client_secret,intent_id) => {
		console.log(loadAirwallex)
	      try {
	        loadAirwallex({
	          env: 'demo', // 可选择的环境 'staging | 'demo' | 'prod'
	        });
	        if (mode === 'payment') {
	          redirectHppForCheckout(client_secret,intent_id);
	        } else if (mode === 'recurring') {
	          redirectHppForRecurring(client_secret,intent_id);
	        }
	      } catch (error) {
	        console.log('HPP重定向出现错误', error);
	      }
	}

	const redirectHppForCheckout = (client_secret,intent_id) => {
	    redirectToCheckout({
	        env: 'demo',
	        mode: 'payment',
	        currency: 'CNY',
	        intent_id:intent_id, // 必须
	        client_secret:client_secret, // 必须
	        successUrl: 'http://192.168.1.10/bussiness/user', // 支付成功跳转的页面 必须是 HTTPS
	        failUrl: 'http://192.168.1.10/bussiness/user', // 支付失败跳转的页面 必须是 HTTPS
	    });
	}
	const redirectHppForRecurring = (client_secret,intent_id) => {
		redirectToCheckout({
			env: 'demo',
			mode: 'recurring',
			currency: 'CNY',
			client_secret:client_secret, // 必须
			recurringOptions: {
				card: {
					next_triggered_by: 'customer',
					merchant_trigger_reason: 'scheduled',
					currency: 'CNY',
				},
			},
			successUrl: 'http://192.168.1.10/bussiness/user', // 必须是 HTTPS
			failUrl: 'http://192.168.1.10/bussiness/user', // 必须是 HTTPS
		});
	}
	
	
</script>

<style lang="less" scoped>
	@magrinTop: 40rpx;
	@borderRadis: 24rpx;
	
	
	.recharge{
		
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #FFEFEF 0%, #FFFDFD 100%);

	.recharge_content {
		width: 100%;
		height: auto;
		padding: 0 40rpx;

		.img {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			right: 0;
			top: 88rpx;
		}

		.amountBox {
			margin-top: 40rpx;

			.currentAmount {
				font-size: 24rpx;
				opacity: 0.5;
				margin-bottom: 30rpx;
			}

			.amount {
				font-size: 40rpx;
				font-weight: 600;

				text {
					font-size: 20rpx
				}
			}
		}

		.rechargeAmount {
			// height: 440rpx;
			width: 100%;
			background: #fff;
			border-radius: 24rpx;
			margin-top: 40rpx;
			padding: 20rpx;
			z-index: 9999;

			.rechargeAmount_title {
				font-size: 28rpx;
				margin-left: 20rpx;
			}
			.set-price {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #eee;
				.util {
					font-size: 48rpx;
					color: #333;
				}
				input {
					font-size: 30rpx;
					flex: 1;
					margin-left: 20rpx;
					
				}
				.dprice {
					margin-left: 20rpx;
					font-size: 26rpx;
					color: red;
					font-weight: 500;
				}
			}

			.lists {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.list {
					width: 200rpx;
					height: 150rpx;
					border: 2rpx solid #E3E3E3;
					border-radius: 24rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					margin: 10rpx 0 0 10rpx;

					.dummyAmount {
						font-size: 52rpx;
					}

					.amount {
						font-size: 28rpx;
						opacity: 0.5;
					}
				}
				.selectedType {
					border: 2px solid var(--Style, #E5353F);
					background: #f8666e1a;
				}
			}
		}

		.payment {
			width: 100%;
			height: 260rpx;
			background: #fff;
			border-radius: @borderRadis;
			margin-top: 20rpx;
			padding: 20rpx;

			.payment_title {
				font-size: 28rpx;
				margin-left: 20rpx;
			}

			.payment_way {
				.wx {
					display: flex;
					justify-content: space-between;
					margin-top: @magrinTop;
					margin-left: 20rpx;

					.wx_box {
						display: flex;
						align-items: center;

						text {
							font-size: 28rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}


		.explain {
			margin-top: 30rpx;

			.title {
				font-size: 28rpx;
				opacity: 0.6;
				margin-bottom: 20rpx;
			}

			text {
				font-size: 24rpx;
				opacity: 0.3;
				letter-spacing: 2rpx;
			}
		}

		.btn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			background: #E5353F;
			display: flex;
			justify-content: center;
			align-items: center;
			letter-spacing: 2rpx;
			color: #fff;
			font-size: 30rpx;
			margin-top: 66rpx;
		}
	}
	}
</style>